<template>
    <div>
        <a-modal
         v-model:visible="batchDetailsVisible" 
         :title="formData.modalTitle"
         :width="636"
         class="batch-details-modal"
        >
            <div style="display: flex;">
                <div>
                    <div class="variety-left">
                        <span class="variety-border-top"></span>
                        <div class="variety-information-text">
                            <div>品名：葡萄糖注射液</div>
                            <div>规格：20ml：10g</div>
                            <div>剂型：注射剂</div>
                            <div>批准文号：国药准字</div>
                            <div>H45020239</div>
                        </div>
                        <div class="variety-information-text">
                            <div>生产批号：2023001</div>
                            <div>生产数量：10000瓶</div>
                            <div>生产时间：2023年5月3日</div>
                        </div>
                        <span class="variety-border-bottom"></span>
                    </div>
                </div>
                <div class="variety-right">
                    <div style="display: flex;justify-content: center;">
                        <span class="top-bottom-flex">
                            <div class="right-text" style="margin-bottom: 5px;" @click="processesClick('原料供应')">
                                原料供应
                            </div>
                            <img style="width: 36px; height: 40px;" src="../../assets/icon_euzvrhspzl6/jiantou_xia.png" />
                        </span>
                        <span class="top-bottom-flex">
                            <div class="right-text" style="margin-bottom: 5px;" @click="processesClick('工艺验证')">
                                工艺验证
                            </div>
                            <img style="width: 36px; height: 40px;" src="../../assets/icon_euzvrhspzl6/jiantou_xia.png"/>
                        </span>
                    </div>
                    <div class="row-link-flex">
                        <div class="right-text" style="margin-right: 5px;" @click="processesClick('共线情况')">
                            共线情况
                        </div>
                        <img style="width: 40px; height: 36px;" src="../../assets/icon_euzvrhspzl6/jiantou_you.png"/>
                        <div class="center-text-k">生产准备</div>
                        <img style="width: 40px; height: 36px;" src="../../assets/icon_euzvrhspzl6/jiantou_zuo.png"/>
                        <div class="right-text" style="margin-left: 5px;" @click="processesClick('清场记录')">
                            清场记录
                        </div>
                    </div>
                    <img class="option-x" style="width: 36px; height: 40px;" src="../../assets/icon_euzvrhspzl6/jiantou_xia.png"/>
                    <div class="key-processes-box">
                        <span class="key-processes-text">关键工序</span>
                        <div class="key-processes-right">
                            <div class="key-processes-right-top">
                                <div class="key-processes-left-strip">
                                    <div class="process-bar-box">
                                        <div class="right-text" style="margin-right: 10px;padding: 17px 13px;" @click="keyProcessesClick('洗瓶')">
                                            洗瓶
                                        </div>
                                        
                                        <img class="option-l"  src="../../assets/icon_euzvrhspzl6/gxlj.png"/>
                                    </div>
                                    <div class="process-bar-box">
                                        <div class="right-text" style="margin-right: 10px;padding: 17px 13px;" @click="keyProcessesClick('配制')">
                                            配制
                                        </div>
                                        
                                        <img class="option-l"  src="../../assets/icon_euzvrhspzl6/gxlj.png"/>
                                    </div>
                                    
                                    <div class="process-bar-box">
                                        <div class="right-text" style="margin-right: 10px;padding: 17px 13px;" @click="keyProcessesClick('灌封')">
                                            灌封
                                        </div>
                                        <span class="bar-d-link"></span>
                                        <span class="bar-d-link-h"></span>
                                    </div>
                                </div>
                                <span class="link-center-l"></span>
                                <span class="link-center-h"></span>
                                <div class="key-processes-right-strip">
                                    <div class="process-bar-box">
                                        
                                        <img class="option-l" src="../../assets/icon_euzvrhspzl6/gxlj.png"/>
                                        <div class="right-text" style="margin-right: 10px;padding: 17px 13px;" @click="keyProcessesClick('灭菌')">
                                            灭菌
                                        </div>
                                        
                                        <img class="option-l" src="../../assets/icon_euzvrhspzl6/gxlj.png"/>
                                    </div>
                                    <div class="process-bar-box">
                                        <div class="right-text" style="margin-right: 10px;padding: 17px 13px;" @click="keyProcessesClick('灯检')">
                                            灯检
                                        </div>
                                        
                                        <img class="option-l" src="../../assets/icon_euzvrhspzl6/gxlj.png"/>
                                    </div>
                                    <div class="process-bar-box">
                                        <div class="right-text" style="margin-right: 10px;" @click="keyProcessesClick('贴签包装')">
                                            贴签包装
                                        </div>
                                        <span class="bar-d-link"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="key-processes-right-bottom bottom-b-v" >
                                <img class="option-l" src="../../assets/icon_euzvrhspzl6/gxlj.png"/>
                                <span class="bar-d-link-dh"></span>
                                <div class="right-text" style="margin-right: 10px;width: 56px;height: 56px;" @click="keyProcessesClick('工艺用水制备')">
                                    工艺用水制备
                                </div>
                            </div>
                            <div class="key-processes-right-bottom" >
                                <img class="option-l" src="../../assets/icon_euzvrhspzl6/gxlj.png"/>
                                <!-- <span class="bar-d-link-dh"></span> -->
                                <div class="right-text" style="margin-right: 10px;width: 56px;height: 56px;" @click="keyProcessesClick('工艺用水制备')">
                                    中间品检验
                                </div>
                            </div>
                        </div>
                    </div>
                    <img class="option-x-bott" style="width: 36px; height: 40px;" src="../../assets/icon_euzvrhspzl6/jiantou_xia.png"/>
                    <div style="margin-top: 25px;">
                        <div class="row-link-flex">
                            <div class="right-text" style="margin-right: 5px;" @click="processesClick('审评记录')">
                                审评记录
                            </div>
                            <img style="width: 40px; height: 36px;" src="../../assets/icon_euzvrhspzl6/jiantou_you.png"/>
                            <div class="center-text-k">生产过程</div>
                            <img style="width: 40px; height: 36px;" src="../../assets/icon_euzvrhspzl6/jiantou_zuo.png"/>
                            <div class="right-text" style="margin-left: 5px;" @click="processesClick('生产记录')">
                                生产记录
                            </div>
                        </div>
                        <span class="top-bottom-flex">
                            <img style="width: 36px; height: 40px;" src="../../assets/icon_euzvrhspzl6/jiantou_xia.png" />
                            <div class="right-text" style="margin-bottom: 5px;" @click="processesClick('检验记录')">
                                检验记录
                            </div>
                            
                        </span>
                    </div>
                </div>
            </div>
            <template slot="footer">
                <div>
                    <a-button @click="handleCancel" style="margin-right: 10px;">关闭</a-button>
                    <a-button v-if="false" @click="handleOk" type='primary'>确定</a-button>
                </div>
            </template>
        </a-modal>
        <processes ref="processesRef"/>
        <keyProcesses ref="keyProcessesRef"/>
    </div>
</template>
<script>
import assessCheckApi from './service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import processes from './processes.vue'
import keyProcesses from './keyProcesses.vue'
export default {
    components:{
        commpVxeTable,
        processes,
        keyProcesses,
    },
    props:{

    },
    data(){
        return{
            formData:{},
            batchDetailsVisible:false,
            
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(val){
            this.formData = val
        },
        handleCancel(){
            this.batchDetailsVisible = false
        },
        handleOk(){
            this.batchDetailsVisible = false
        },
        detailSituationClick(row){
            this.$message.warning('开发中，敬请期待！')
        },
        processesClick(name){
            if(name == '原料供应' || name == '检验记录' || name == '工艺验证' ){
                this.$refs.processesRef.processesVisible = true
                this.$refs.processesRef.getData({processesName:name,modalTitle:name})
            }else{
                this.$message.warning('开发中，敬请期待！')
            }
        },
        keyProcessesClick(name){
            if(name == '洗瓶'){
                this.$refs.keyProcessesRef.keyProcessesVisible = true
                this.$refs.keyProcessesRef.getData({modalTitle:name})
            }else{
                this.$message.warning('开发中，敬请期待！')
            }
        },
    }
}
</script>
<style lang="less">
.batch-details-modal{
    min-width: 875px;
}
.variety-left{
    padding: 30px 10px 30px 10px;
    border-left: 2px solid #212930;
    position: relative;
    .variety-border-top{
        display: inline-block;
        width: 26px;
        height: 2px;
        border-top:2px solid #212930 ;
        position: absolute;
        top: 0;
        left: 0;
    }
    .variety-border-bottom{
        display: inline-block;
        width: 26px;
        height: 2px;
        border-bottom:2px solid #212930 ;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .variety-information-text{
        margin-bottom: 42px;
        color: #323232;
    }
}
.variety-right{
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    .right-text{
        width: 55px;
        height: 55px;
        background: #5ca3e5;
        color: #fff;
        border-radius: 50%;
        padding: 7px;
        text-align: center;
    }
    .center-text-k{
        border: 2px solid #000;
        font-weight: 600;
        padding: 10px 15px;
        margin: 5px;
    }
    .top-bottom-flex{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 10px;
    }
    .row-link-flex{
        display: flex;
        align-items: center;
    }
}
.option-l{
    width: 18px;
    height: 26px;
    margin-right: 17px;
}
.option-x{
    position: absolute;
    width: 30px;
    top: 154px;
    right: 130px;
}

.key-processes-box{
    display: flex;
    border: 2px solid #000;
    margin-left: 38px;
    margin-top: 17px;
    .key-processes-text{
        display: inline-block;
        width: 20px;
        /* height: 100%; */
        font-size: 20px;
        font-weight: 600;
        margin: auto 20px;
    }
    .connect-line-unify{
        display: inline-block;
        width: 3px;
        height: 62px;
        background: #000;
    }
    .key-processes-right{
        // margin-left: 24px;
    }
    .key-processes-right-top{
        position: relative;
        display: flex;
        margin-top: 20px;
    }
    .key-processes-left-strip{
        margin-left: 25px;
        flex: 1;
    }
    .key-processes-right-strip{
        margin-left: 25px;
        flex: 1;
    }
    .process-bar-box{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .bar-d-link{
        width: 2px;
        height: 19px;
        display: inline-block;
        background: #323232;
        margin-right: 10px;
        margin-top: 1px;
    }
    .bar-d-link-h{
        position: absolute;
        width: 40px;
        height: 2px;
        background: #323232;
        bottom: 26px;
        left: 52px;
    }
    .link-center-l{
        display: inline-block;
        width: 2px;
        background: #323232;
        height: 237px;
    }
    .link-center-h{
        position: absolute;
        right: 39px;
        width: 53px;
        height: 2px;
        background: #323232;
    }
    .key-processes-right-bottom{
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-bottom: 15px;
        margin-right: 61px;
    }
    .bottom-b-v{
        margin-bottom: 0;
        position: relative;
    }
    .bar-d-link-dh{
        position: absolute;
        width: 94px;
        height: 2px;
        top: 0;
        left: 51px;
        background: #323232;
    }
}
.option-x-bott{
    width: 36px;
    height: 40px;
    position: absolute;
    bottom: 152px;
    right: 125px;
}
.top-bottom-flex:hover{
    cursor: pointer;
}
.right-text:hover{
    cursor: pointer;
}


</style>